<template>
    <div class="totalProjectInvestmentPage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center">
                <label>部门</label>
                <el-select v-model="form.departmentId" class="m-l5" placeholder="请选择部门">
                    <el-option v-for="(item,index) in departmentList" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-select v-model="form.projectId" class="m-l5" placeholder="请选择项目" clearable>
                    <el-option v-for="(item,index) in projectList" :key="index" :label="item.projectName" :value="item.projectId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-buttons m-l50">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                        class="button_edit"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :page="page"
                :tableData="tableData"
                height="550"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #buttons="scope">
                <!--   v-permission="'378491637090881536'" 加引号的原因是解决js自动四舍五入问题           -->
                <div class="d-flex" v-permission="'378491637090881536'">
                    <el-button v-if="!scope.row.isEdit"
                               @click="onEdit(scope.row)" class="button_edit"
                    >编辑</el-button>
                    <el-button v-else @click="onSave(scope.row)" class="button_view">保存</el-button>
                    <el-button v-if="scope.row.isEdit" @click="()=>{scope.row.isEdit = false;}" class="button_cancel2">取消</el-button>
                </div>
            </template>
            <template #equipmentCosts="scope">
                <span v-if="!scope.row.isEdit">{{scope.row.equipmentCosts}}</span>
                <el-input v-else v-model="scope.row.equipmentCosts" placeholder="请输入设备及软装"></el-input>
            </template>
            <template #otherCosts="scope">
                <span v-if="!scope.row.isEdit">{{scope.row.otherCosts}}</span>
                <el-input v-else v-model="scope.row.otherCosts" placeholder="请输入其他成本"></el-input>
            </template>
        </public-table>
    </div>
</template>

<script setup>
import {ElDatePicker, ElDivider, ElMessage, ElOption, ElSelect,ElTable,ElTableColumn} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import {budgetManagement, exportApi, fundManagementApi} from "@/api/businessFinance";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";
import PublicTable from "@/components/PublicTable";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});
const tableOption = ref([
  { label: "部门名称", prop: "departmentName", minWidth: 80 },
  { label: "项目名称 ", prop: "projectName", minWidth: 80 },
  { label: "年度 ", prop: "year", minWidth: 80 },
  { label: "工程类费用 ", prop: "engineeringExpenses", minWidth: 100 },
  { label: "设计费用 ", prop: "designCost", minWidth: 80 },
  { label: "招标费用", prop: "expenseOfPublicBidding", minWidth: 80 },
  { label: "设备及软装", prop: "equipmentCosts", slot: true, minWidth: 80 },
  { label: "其他成本", prop: "otherCosts", slot: true, minWidth: 80 },
  { label: "总投资", prop: "total", minWidth: 80 },
  { label: "操作", prop: "buttons", slot: true, width: 200 },
]);

const tableData = ref([]);

const form = reactive({
    departmentId:'',
    year:'',
    projectId:'',
});

const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const getBudgetTotalInvestment = (param) => {
    fundManagementApi.getBudgetTotalInvestment(param).then(res=>{
      if(res.code === '200'){
          res.data.content.forEach(item=>{item.isEdit = false;});
          tableData.value = res.data.content;
          page.total = res.data.totalSize;
      }
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetTotalInvestment(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetTotalInvestment(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBudgetTotalInvestment(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
  exportApi.getBudgetTotalInvestmentLeadingOut(form).then(res=>{
      if(res){
          exportExcelFile(res,'项目总投资表');
      }
  });
}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        projectList.value = res.data;
    });
}

/**
 * 编辑
 * @param row
 */
const onEdit = (row) => {
    row.isEdit = true;
}

const onSave = (row) => {
    if(row.equipmentCosts === ''){
        ElMessage.warning('设备及软装不能为空!');
        return;
    }
    if(row.otherCosts === ''){
        ElMessage.warning('其他成本不能为空!');
        return;
    }
    let params = {
        budgetTotalInvestmentId:row.budgetTotalInvestmentId,
        equipmentCosts:row.equipmentCosts,
        otherCosts:row.otherCosts,
        departmentId:row.departmentId,
        projectId:row.projectId,
        year:row.year,
    }
    budgetManagement.updateBudgetTotalInvestment(params).then(res=>{
        if(res.code==='200'){
            row.isEdit = false;
            ElMessage.success('修改成功!');
            page.current = 1;
            page.size = 10;
            getBudgetTotalInvestment({
                pageNum:1,
                pageSize:10
            });
        }else{
            row.isEdit = false;
            ElMessage.error('修改失败!');
            page.current = 1;
            page.size = 10;
            getBudgetTotalInvestment({
                pageNum:1,
                pageSize:10
            });
        }
    });
}

onMounted(()=>{
    getDepartmentVo();
    getProjectList();
    getBudgetTotalInvestment({
        pageNum:1,
        pageSize:10
    });
});
</script>

<style lang="scss" scoped>
.totalProjectInvestmentPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>
